<template>
	<view class="container">
		<view class="coin_header">
			<!-- #ifdef MP -->
			<view class="sys-head" view :style="{ height: statusBarHeight }"></view>
			<!-- #endif -->
			<view class="navbar">
				<text class="iconfont icon-xiangzuo" @click="navback"></text>
				<text class="title">代理商明细</text>
			</view>
			<view class="header_top">
				<view class="item">
					<text>代理商余额</text>
					<view class="yue"><text class="rmb">￥</text>{{ info.agent_money }}</view>
					<navigator :url="'./withdrawal?money=' + info.agent_money" class="btn">
						提现
					</navigator>
				</view>
			</view>
			<view class="header_bottom">
				<view class=""><text>本月收入 {{ info.agent_money_month }}</text></view>
				<view class=""><text>本月支出 {{ info.agent_month_expend }}</text></view>
			</view>
		</view>
		<view class="coin_body">
			<view class="coin_tab">
				<text 
					class="tab_item" 
					:class="curTab == index ? 'act_tab' : ''"
					v-for="(item, index) in tabList" 
					:key="index"
					@click="tabClick(index)"
				>{{ item.name }}</text>
			</view>
			<scroll-view :scroll-y="true" class="detail_list" @scrolltolower="reachBottom">
				<view class="detail_cell" v-for="(item,index) in list" :key="index">
					<view class="name">
						<text>{{ item.mer_name }}</text>
						<view class="remark">
							<text :style="{color: item.type == 1 || item.type == 3 ? '#fc8200' : '#009cff'}">
								{{ item.title }}
							</text>
							<text>{{ item.create_time }}</text>
						</view>
						
					</view>
					<view class="price" :class="data_type == 'income' ? 'income' : 'expend'">
						<!-- <text>{{ data_type == 'income' ? '+' : '-' }}</text> -->
						<text>{{ item.number }}</text>
					</view>
				</view>
				<view class="loading" v-if="list.length > 0">
					<view class="load" v-if="loading">
						<text class="iconfont icon-jiazai"></text>
						<text>正在加载中</text>
					</view>
					<view class="nomore" v-else>没有更多了</view>
				</view>
				<view class="empty" v-if="list.length == 0">
					<image src="/static/images/empty-box.png" mode="widthFix"></image>
					<text>暂无数据！</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import { agencyDetail } from '@/api/user.js'
	export default {
		data() {
			return {
				tabList: [{
					name: '收入'
				},{
					name: '支出'
				}],
				curTab: 0,
				data_type: 'income',
				list: [],
				loading: true,
				info: {},
				pagIndex: 1,
				expend: 1,
				statusBarHeight: statusBarHeight
			};
		},
		onLoad() {
			this.getMyCoinList()
		},
		methods: {
			navback() {
				uni.navigateBack({
					delta: 1
				})
			},
			tabClick(index) {
				this.list = []
				this.curTab = index
				this.data_type == 'income' ? this.data_type = 'expend' : this.data_type = 'income'
				this.loading = true
				this.pagIndex = 1
				let is_expend = index + 1
				this.expend = index + 1
				this.getMyCoinList(is_expend)
			},
			reachBottom () {
				this.pagIndex++;
				this.getMyCoinList(this.expend)
			},
			getMyCoinList(is_expend) {
				agencyDetail({
					page: this.pagIndex,
					limit: 30,
					is_expend: is_expend || 1
				}).then(res => {
					// console.log(res)
					if (res.data.lists.length < 30) {
						this.loading = false
					}
					this.info = res.data
					this.list.push(...res.data.lists)
				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
.coin_header {
	width: 100%;
	height: 450rpx;
	background-image: linear-gradient(45deg, #b6359c, #ef0a6a);
	color: #fff;
	padding: 0 0 30rpx;
	.navbar {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		color: #fff;
		font-size: 32rpx;
		padding: 0 20rpx;
		.iconfont {
			margin-right: 20rpx;
		}
		.title {
			width: 55%;
			text-align: right;
		}
	}
	.header_top {
		display: flex;
		justify-content: space-around;
		// margin-bottom: 35rpx;
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			border-right: 1px solid #eee;
			padding: 40rpx 0 50rpx;
			&:last-child {
				border-right: 0;
			}
			.yue {
				font-size: 50rpx;
				.rmb {
					font-size: 36rpx;
				}
			}
			.btn {
				width: 200rpx;
				padding: 5rpx 0;
				background-color: #fff;
				color: #ae05f5;
				border-radius: 20rpx;
				margin-top: 15rpx;
				text-align: center;
			}
		}
	}
	.header_bottom {
		display: flex;
		align-items: center;
		justify-content: center;
		view {
			margin: 0 30rpx;
		}
	}
}
.coin_body {
	width: 95%;
	height: calc(100vh - 310rpx);
	background-color: #fff;
	margin: -40rpx auto 0;
	border-radius: 10rpx;
	padding: 0 40rpx;
	.coin_tab {
		display: flex;
		border-bottom: 2px solid #e2dede;
		.tab_item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50%;
			height: 100rpx;
			font-size: 30rpx;
		}
		.act_tab {
			position: relative;
			color: #da0def;
			&::after {
				content: '';
				position: absolute;
				bottom: -2px;
				left: 50%;
				transform: translate(-50%);
				width: 100%;
				height: 2px;
				background-color: #da0def;
				animation: rainbow 0.2s linear;
			}
		}
		@keyframes rainbow {
			0% {
				width: 0;
			}
		
			50% {
				width: 50%;
			}
		
			100% {
				width: 100%;
			}
		}
	}
	.detail_list {
		position: relative;
		width: 100%;
		height: calc(100% - 100rpx);
		padding-top: 10rpx;
		.detail_cell {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #eee;
			.name {
				display: flex;
				flex-direction: column;
				text:first-child {
					font-size: 30rpx;
				}
				.remark text{
					font-size: 24rpx;
					margin-right: 20rpx;
				}
			}
			.price {
				font-size: 32rpx;
			}
			.income {
				color: #33aa5d;
			}
			.expend {
				color: #fa2828;
			}
		}
		
	}
	.loading {
		.load {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.icon-jiazai {
			display: block;
			margin-right: 10rpx;
			animation: mymove 0.8s linear infinite;
		}
		@keyframes mymove
		{
		from {transform: rotate(0deg);}
		to {transform: rotate(360deg);}
		}
	}
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		color: #999;
		padding: 80rpx;
		image {
			width: 100%;
		}
	}
}

</style>
